{% extends 'base.html' %}
{% block content %}

<div class="mt-5 card-deck container" style="margin:auto;">
    <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-body text-primary">
            <h5 class="card-title">{{ all_device }}</h5>
        </div>
        <div class="card-footer bg-primary border-primary text-white">设备总数</div>
    </div>

    <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-body text-success">
            <h5 class="card-title">{{cisco_device}}</h5>
        </div>
        <div class="card-footer bg-success border-success text-white">Cisco设备数</div>
    </div>

    <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-body text-danger">
            <h5 class="card-title">{{huawei_device}}</h5>
        </div>
        <div class="card-footer bg-danger border-danger text-white">华为设备数</div>
    </div>
</div>

<h3 class="mt-4 container">最近10个日志</h3>
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>目标设备IP</th>
            <th>操作</th>
            <th>状态</th>
            <th>时间</th>
        </tr>
    </thead>
    <tbody>
        {% for log in last_10_event %}
        <tr>
            <td></td>
            <td>{{log.target}}</td>
            <td>{{log.action}}</td>
            <td>{{log.status}}</td>
            <td>{{log.time}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% endblock content %}